<template >
  <div class="radioPlay">
    <div calss="vidoPlayBody">
      <div class="vidoPlay-logo">
        <h3>QQ音乐</h3>
        <div class="vidoPlay-logo-left">
          <div>QQ音乐，千万高品质曲库尽享<button>客户端下载</button>
            <span>图像</span>
            <span>登录名</span>
            <span class="right-div">退出</span>
          </div>
        </div>
      </div>
      <div class="vidoPlay-btn">
        <a href="#">
          <button class="vidoPlay-btns">个性电台---</button>
        </a>
      </div>

      <div class="vidoPlay-body">
        <div class="vidoPlay-div">
          <h2 class="vidoPlay-div-h2">一起走过的日子</h2>
          <span>刘德华</span>
          <img src="#" alt="" class="vidoPlay-img">
        </div>
      </div>

      <div class="vidoPlay-span">
        <span>
          歌词
        </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "VidoPlay",
};
</script>

<script lang="ts" setup></script>

<style scoped>
.radioPlay {
  widows: 100vh;
  height: 100vh;
  background-color: rgba(0, 0, 0, .35);
  z-index: 2;
}

.vidoPlay-logo {
  display: flex;
  justify-content: space-between;
  height: 34px;
  margin-bottom: 50px;
}

h3 {
  font-size: 25px;
  opacity: 0.3;
}

.vidoPlay-logo-left {
  widows: 487px;
  height: 31px;
}

.vidoPlay-btn {
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
}

.vidoPlay-btns {
  width: 131px;
  height: 46px;
}

.vidoPlay-img {
  width: 242px;
  height: 242px;
}

.vidoPlay-body {
  width: 654px;
  height: 252px;
  border: 1px solid;
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  margin-left: -328px;
  position: relative;
  margin-bottom: 50px;
}

.vidoPlay-img {
  width: 252px;
  height: 252px;
  position: absolute;
  left: 400px;
}

.vidoPlay-span {
  text-align: center;
  widows: 100%;
  height: 34px;
}

.vidoPlay-div-h2 {
  display: inline-block;
  width: auto;
  overflow: hidden;
  font-size: 25px;

}
</style>